<template>
	<view style="height:100vh;" class="flex flex-column">
		<view class="flex border-bottom border-light-secondary" style="height: 100rpx;">
			<view @click="changeTab(index)" v-for="(item,index) in tabBar" :key="index" class="flex flex-column align-center justify-center flex-1 "
			 :class="index===tabIndex?'text-main':''">
				<text class="font-md">{{item.name}}</text>
				<text :class="index===tabIndex?'bg-main':'bg-white'" style="height: 8rpx;width: 30rpx;" class="rounded"></text>
			</view>
		</view>
		<!-- 列表部分 -->
		<swiper :current="tabIndex" @change="changeTab($event.detail.current)" :duration="250" class="flex-1 flex">
			<swiper-item v-for="(item,index) in tabBar" :key="index" class="flex-1 flex">
				<scroll-view class="flex-1" scroll-y="true">
					<template v-if="index===0">
						<view class="text-muted bg-light px-3 flex align-center font-sm" style="height: 60rpx;">
							文件下载至 /storage/xxx/xxx/xxx
						</view>
						<view class="border-bottom border-light-secondary p-2 font text-muted">
							下载中({{downing.length}})
						</view>
						
						<f-list :showRight="false" v-for="(item,index) in downing" :item="item" :index="index" :key="'i'+index">
							<view class="flex align-center" style="height: 70rpx;">
								<text class="iconfont icon-zanting text-main"></text>
								<text class="ml-1 text-main">{{item.progress}}%</text>
							</view>
							<progress :stroke-width="4" :percent="item.progress" activeColor="#009CFF" slot="bottom" />
						</f-list>
						<view class="border-bottom border-light-secondary p-2 font text-muted">
							下载完成({{downed.length}})
						</view>
						<f-list :showRight="false" v-for="(item,index) in downed" :item="item" :index="index" :key="'d'+index"></f-list>
					</template>
					<template v-else>
						<view class="border-bottom border-light-secondary p-2 font text-muted">
							上传中({{uploading.length}})
						</view>
						
						<f-list :showRight="false" v-for="(item,index) in uploading" :item="item" :index="index" :key="'i'+index">
							<view class="flex align-center" style="height: 70rpx;">
								<text class="iconfont icon-zanting text-main"></text>
								<text class="ml-1 text-main">{{item.progress}}%</text>
							</view>
							<progress :stroke-width="4" :percent="item.progress" activeColor="#009CFF" slot="bottom" />
						</f-list>
						<view class="border-bottom border-light-secondary p-2 font text-muted">
							下载完成({{uploaded.length}})
						</view>
						<f-list :showRight="false" v-for="(item,index) in uploaded" :item="item" :index="index" :key="'d'+index"></f-list>
					</template>
				</scroll-view>
			</swiper-item>


		</swiper>
	</view>
</template>

<script>
	import fList from '@/components/common/f-list.vue';
	import {mapState} from 'vuex';
	
	export default {
		components: {
			fList
		},
		data() {
			return {
				tabIndex: 0,
				tabBar: [{
						name: '下载列表'
					},
					{
						name: '上传列表'
					}
				],
				list: []
			}
		},
		computed: {
			...mapState({
				uploadList:state=>state.uploadList,
				downList:state=>state.downList
			}),
			uploading() {
				if(!this.uploadList){
					return []
				}
				return this.uploadList.filter(item => item.progress < 100)
			},
			uploaded() {
				if(!this.uploadList){
					return []
				}
				return this.uploadList.filter(item => item.progress == 100)
			},
			downing() {
				if(!this.downList){
					return []
				}
				return this.downList.filter(item => item.progress < 100)
			},
			downed() {
				if(!this.downList){
					return []
				}
				return this.downList.filter(item => item.progress == 100)
			}
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index
			}
		},
		onNavigationBarButtonTap() {
			uni.showModal({
				content: '是否清楚传输列表记录',
				success:  (res)=> {
					if (res.confirm) {
						this.$store.dispatch('clearList')
					} 
				}
			});
		},
		onShow() {
			this.$store.dispatch('initList')
		}
	}
</script>

<style>

</style>
